﻿@page

@using Volo.Abp.AspNetCore.Mvc.UI.Theming;
@model YAPACS.RisServer.Pages.Account.LoginModel
@inject IThemeManager ThemeManager
@inject Volo.Abp.Settings.ISettingProvider SettingProvider

@{
    Layout = ThemeManager.CurrentTheme.GetEmptyLayout();
}

@section styles
{
    <style>
        body {
            background-image: url(/images/login-background.jpg)
        }

            body > .container {
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #2980b9ee;
            }

                body > .container > .login-container {
                    width: 600px;
                }

        .foot {
            margin-top: 15px;
            font-size: 16px;
            color: #ddd;
            text-align: center;
        }
    </style>
}

@section scripts
{
    <script type="text/javascript">
        $(() => {
            const loadUserGroups = function () {
                const userName = $(this).val();
                const userGroupEle = $('#UserGroup').get(0);
                userGroupEle.options.length = 0;
                if (userName.trim()) {
                    $.ajax({
                        type: 'GET',
                        url: `/api/user-groups?userName=${userName}`,
                        success: (data) => {
                            userGroupEle.options.add(new Option('请选择一个用户组', ''));
                            if (data && data instanceof Array) {
                                data.forEach((item) => {
                                    userGroupEle.options.add(new Option(item.name, item.id));
                                    if (item.isDefault) {
                                        userGroupEle.value = item.id;
                                    }
                                });
                            }
                        }
                    });
                }
            };
            $('[name="UserName"]').on('blur', loadUserGroups);
            $('[name="UserGroup"]').on('focus', function () {
                if ($('#UserGroup').get(0).options.length === 0) {
                    loadUserGroups();
                }
            });
        });
    </script>
}

<abp-row class="login-container">
    <abp-column class="col mx-auto" style="max-width: 440px">
        <div class="card mt-10 shadow-sm rounded">
            <div class="card-body p-5">
                <h4>登录</h4>
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <form method="post" class="mt-4">
                    <div class="mb-3">
                        <label asp-for="UserName" class="form-label">用户名</label>
                        <input asp-for="UserName" class="form-control" autocomplete="off" placeholder="请输入用户名" />
                        <span asp-validation-for="UserName" class="text-danger"></span>
                    </div>

                    <div class="mb-3">
                        <label asp-for="Password" class="form-label"></label>
                        <div class="input-group">
                            <input type="password" class="form-control" autocomplete="new-password" placeholder="请输入密码" asp-for="Password" />
                            <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
                        </div>
                        <span asp-validation-for="Password"></span>
                    </div>

                    <div class="mb-3">
                        <abp-select asp-for="UserGroup" asp-items="Array.Empty<SelectListItem>()" class="form-control">
                            <option value="">请选择一个用户组</option>
                        </abp-select>
                    </div>

                    <div class="mb-3">
                        <abp-input asp-for="RememberMe" />
                    </div>

                    <div class="d-grid gap-2">
                        <abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-lg mt-3">登录</abp-button>
                    </div>
                </form>
            </div>
        </div>
        <div class="foot">
            <div>YAPACS | 永安科技</div>
        </div>
    </abp-column>
</abp-row>